import React from "react";
import List from './List';
import Input from "./Input";

class App extends React.Component {
  state = {content:'',list:[],num:0};
  // 输入框内容绑定
  handleChange = (e,type)=>{
    this.setState({[type]:e.target.value});
  }
  // 点击提交按钮显示内容
  submitContent = ()=>{
    if(this.state.content){
      this.setState({
        list:[...this.state.list,{"content":this.state.content,"id":this.state.num++,"isSelect":false}],
        content:''
      })
    }
  }
  // 点击删除按钮实现删除
  deleteContent = (paras)=>{
    this.setState({
      list:this.state.list.filter(
        item=>paras!=item.id
      )
    })
  }
  // 点击选择按钮更改状态
  changeIsSelect = (paras)=>{
    this.setState({
      list: this.state.list.filter(
        item => {
          if(paras == item.id){
            item.isSelect = !item.isSelect;
          }
          return item
        }
      )
    })
  }
  render() {
    const {content,list} = this.state;
    return ( 
      <div className='doList'>
        <Input 
          content={content} 
          handleChange={this.handleChange}
          submitContent={this.submitContent}
        />
        <ul className="content2">
          <List 
            list={list} 
            deleteContent={this.deleteContent}
            changeIsSelect={this.changeIsSelect}
          />
        </ul>
      </div>
    )
  }
}

export default App;